<template>
  <div class="products-batch-edit">
    <el-card>
      <template #header>
        <h3>商品批量编辑</h3>
      </template>

      <el-alert
        title="温馨提示"
        type="info"
        description="请先选择要编辑的商品，然后设置要批量修改的字段。"
        :closable="false"
        show-icon
        class="mb-20"
      />

      <el-form :model="batchForm" label-width="120px">
        <el-form-item label="选择商品">
          <el-button type="primary" @click="showSelectDialog">
            <el-icon><Plus /></el-icon>
            选择商品 ({{ selectedProducts.length }}个)
          </el-button>
        </el-form-item>

        <el-divider />

        <el-form-item label="修改分类">
          <el-switch v-model="batchForm.updateCategory" />
          <el-select v-if="batchForm.updateCategory" v-model="batchForm.category" placeholder="请选择分类">
            <el-option label="电子产品" value="electronics" />
            <el-option label="服装鞋帽" value="clothing" />
            <el-option label="食品饮料" value="food" />
          </el-select>
        </el-form-item>

        <el-form-item label="修改价格">
          <el-switch v-model="batchForm.updatePrice" />
          <el-input-number
            v-if="batchForm.updatePrice"
            v-model="batchForm.priceAdjustment"
            :precision="2"
          />
          <el-radio-group v-if="batchForm.updatePrice" v-model="batchForm.priceType">
            <el-radio label="add">增加</el-radio>
            <el-radio label="subtract">减少</el-radio>
            <el-radio label="multiply">乘以</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="修改状态">
          <el-switch v-model="batchForm.updateStatus" />
          <el-select v-if="batchForm.updateStatus" v-model="batchForm.status" placeholder="请选择状态">
            <el-option label="在售" value="onSale" />
            <el-option label="下架" value="offShelf" />
            <el-option label="仓库" value="warehouse" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleBatchEdit" :loading="editing" :disabled="selectedProducts.length === 0">
            批量修改
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const editing = ref(false)
const selectedProducts = ref([])

const batchForm = reactive({
  updateCategory: false,
  category: '',
  updatePrice: false,
  priceAdjustment: 0,
  priceType: 'add',
  updateStatus: false,
  status: ''
})

const showSelectDialog = () => {
  ElMessage.info('打开商品选择对话框')
}

const handleBatchEdit = async () => {
  editing.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  ElMessage.success('批量修改成功')
  editing.value = false
}

const handleReset = () => {
  Object.assign(batchForm, {
    updateCategory: false,
    category: '',
    updatePrice: false,
    priceAdjustment: 0,
    priceType: 'add',
    updateStatus: false,
    status: ''
  })
}
</script>

<style scoped>
.products-batch-edit {
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}
</style>

